<template>
	<view>
		<view class="page-foot">
			<view class="btn"  @tap="submit">提交评价</view>
		</view>
		<view class="container">
			<view v-if="house_info" class="houselist bb20">
				<view class="houseitem flex">
					<image :src="house_info.image_text" class="houseimg" mode="aspectFill"></image>
					<view class="flex-grow-1">
						<view class="flex-box">
							<view class="housename m-ellipsis flex-grow-1">{{ house_info.name }}</view>
							<view class="label">{{ house_info.sale_state_text }}</view>
						</view>
						<view class="area-size flex-box flex-between">
							<text>{{ house_info.city }} | {{ house_info.region }}</text>
							<text>{{ house_info.min_space }}㎡-{{ house_info.max_space }}㎡</text>
						</view>
						<view class="targetbox flex flex-wrap">
							<view class="targetitem" v-for="(item, index) in house_info.house_tag_ids_text_arr">
								{{ item }}
							</view>
						</view>
						<view class="flex-box flex-between">
							<view class="housecost">
								¥
								<text>{{ house_info.price }}</text>
								/㎡
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="p40 bb20">
				<view class="fs34 col10 mb30">楼盘评价</view>
				<u-rate @change="changeStar" :count="5" :value="star" size="50" inactive-color="#D8D8D8"
					active-color="#FF7B40" gutter="10"></u-rate>
				<view class="fs34 col10 mb20 mt40">您的身份</view>
				<view class="type-list flex flex-align-start flex-wrap">
					<view :class="{ active: typeIndex == index }" @click="changeType(index)" class="item"
						v-for="(item, index) in typeLists">{{ item }}</view>
					<view :class="'item ' + (identity_type == 1 ? 'active' : '')" @tap="chooseidentity_type"
						data-identity_type="1">考虑看房</view>
					<view :class="'item ' + (identity_type == 2 ? 'active' : '')" @tap="chooseidentity_type"
						data-identity_type="2">看过该房</view>
					<view :class="'item ' + (identity_type == 3 ? 'active' : '')" @tap="chooseidentity_type"
						data-identity_type="3">我是业主</view>
					<view :class="'item ' + (identity_type == 4 ? 'active' : '')" @tap="chooseidentity_type"
						data-identity_type="4">我是游客</view>
				</view>
			</view>
			<!--  -->
			<view class="feedback-box">
				<textarea class="textarea mb20 fs30" placeholder-class="colc" v-model="content" placeholder="请点评"></textarea>
				<view class="upload-list flex flex-align-start flex-wrap">
					<view class="item" v-for="(item, index) in images_text_arr">
						<image :data-index="index" :lazy-load="true" :src="item" class="img1" mode="aspectFill"></image>
						<image @tap.stop.prevent="delImg" :data-index="index" class="icon-close"
							src="/static/icon/icon-close.png" mode="aspectFit"></image>
					</view>
					<image @tap="upload" class="item" src="/static/icon/addpic.png"
						mode="aspectFill">
					</image>
				</view>
			</view>
			<!--  -->
		</view>
	</view>
</template>

<script>
	const app = getApp();

	const functions = require('../../../utils/functions.js');
	export default {
		data() {
			return {
				house_info: {},
				house_id: 0,
				star: 5,
				images_arr: [],
				images_text_arr: [], //图片
				content: '', //评价内容
				identity_type:1,
			};
		},
		onLoad: function(options) {
			this.house_id = options.house_id || 0
			this.house_info = app.globalData.pagesParamHouseInfo
		},
		methods: {
			chooseidentity_type(e) {
				this.identity_type = e.currentTarget.dataset.identity_type
			},
			changeStar(e) {
				this.star = e;
			},
			// 上传图片
			upload() {
				var that = this;
				var len = that.images_arr.length;

				if (len >= 9) {
					functions.toast('最多上传9张图');
					return false;
				}
				functions.chooseImg(9 - len, function(res) {
					console.log(res);
					var images_arr = that.images_arr;
					var images_text_arr = that.images_text_arr;
					images_arr.push(res.url);
					images_text_arr.push(res.fullurl);
					that.images_arr = images_arr;
					that.images_text_arr = images_text_arr
				});
			},
			// 删除图片
			delImg(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var images_arr = that.images_arr;
				var images_text_arr = that.images_text_arr;
				images_arr.splice(index, 1);
				images_text_arr.splice(index, 1);
				that.images_arr = images_arr;
				that.images_text_arr = images_text_arr
			},
			// 提交
			submit() {
				var that = this;
				var json = {
					house_id: this.house_id,
					star: this.star,
					identity_type: this.identity_type,
					images: this.images_arr.length > 0 ? this.images_arr.join(',') : '',
					content: this.content
				};

				if (!this.content) {
					functions.toast('请输入评价内容');
					return false;
				}
				functions.checkLogin(function(ret) {
					if (ret) {
						//继续提交
						functions.submitAjaxData(that, '/api/xiluhouse/house/comment', json, function(res) {
							let pages = getCurrentPages(); // 页面栈数组，第一个元素为首页，最后一个元素为当前页面。
							let prevPage = pages[pages.length - 2]; // 上一页
							prevPage.$vm.has_change=true;
							functions.showSuccess(res.msg,function(){
								uni.navigateBack();
							});	
						});
					} else {
						functions.toast('请先登录');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bb20 {
		border-bottom: 20rpx solid #f6f7fa;
	}

	.houselist {
		padding: 40rpx;
	}

	.houselist .houseitem .houseimg {
		width: 240rpx;
		height: 190rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.houselist .housename {
		font-size: 30rpx;
		padding-bottom: 10rpx;
	}

	.houselist .area-size {
		font-size: 24rpx;
		color: #898989;
	}

	.houselist .targetbox {
		padding: 14rpx 0 0;
	}

	.houselist .targetitem {
		padding: 2rpx 4rpx;
		background: #cce9ff;
		font-size: 18rpx;
		color: var(--blue);
		border-radius: 2rpx;
		margin-right: 10rpx;
		margin-bottom: 12rpx;
	}

	.houselist .housecost {
		color: #f8532f;
		font-size: 24rpx;
	}

	.houselist .housecost text {
		font-size: 34rpx;
	}

	.houselist .event {
		padding-top: 11rpx;
		font-size: 18px;
		color: #898989;
	}

	.houselist .event .bao {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(180deg, #00c4ff, var(--blue));
		color: #fff;
		margin-right: 10rpx;
	}

	.houselist .event .dong {
		width: 26rpx;
		text-align: center;
		line-height: 26rpx;
		font-size: 18rpx;
		height: 26rpx;
		border-radius: 5rpx;
		background: linear-gradient(270deg, #ff6635, #ffb45c);
		color: #fff;
		margin-right: 10rpx;
	}

	.houselist .label {
		padding: 3rpx 9rpx;
		background: rgba(0, 145, 255, 0.2);
		border-radius: 2rpx;
		font-size: 22rpx;
		color: #0091ff;
		line-height: 30rpx;
	}

	.type-list .item {
		margin: 0 20rpx 20rpx 0;
		padding: 15rpx 25rpx;
		border: 1rpx solid #cccccc;
		border-radius: 99rpx;
		font-size: 30rpx;
		color: #898989;
		line-height: 34rpx;
	}

	.type-list .item.active {
		background: rgba(0, 145, 255, 0.1);
		color: var(--normal);
		border: 1rpx solid var(--normal);
	}

	.feedback-box {
		padding: 40rpx;
		background: #ffffff;
	}

	.feedback-box .textarea {
		width: 100%;
		height: 150rpx;
	}

	.upload-list .item {
		position: relative;
		margin: 0 15rpx 15rpx 0;
		display: block;
		width: 120rpx;
		height: 120rpx;
		border: 1rpx solid #cccccc;
	}

	.upload-list .item .img1 {
		display: block;
		width: 120rpx;
		height: 120rpx;
	}

	.upload-list .icon-close {
		position: absolute;
		right: -10rpx;
		top: -10rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		z-index: 1;
	}

	.page-foot {
		padding: 0 40rpx 40rpx;
	}

	.page-foot .btn {
		width: 670rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background: var(--blue);
		box-shadow: 0rpx 4rpx 40rpx rgba(3, 103, 179, 0.3);
		padding: 0;
		line-height: 90rpx;
		font-weight: normal;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}
</style>
